<template>
  <div>
    <CnBoldP class="mt-11 text-20">合格标准快捷配置</CnBoldP>
    <CnNormalP class="mt-6 mb-20 text-4xText"> 可以快速、批量配置设备的合格标准 </CnNormalP>
    <!-- <ProductFilesItem></ProductFilesItem> -->
    <div class="card_wrap_box">
      <ParamCard
        class="param_card"
        :paramSelectTypeList="paramSelectTypeList"
        :paramStandardList="paramStandardList"
        :paramDataList="paramDataList"
        :devDataList="devDataList"
      ></ParamCard>
      <DevCard
        class="dev_card"
        :devDataList="devDataList"
        :devIds="devIds"
        :isDisabled="isDisabled"
        @updateDevIdsFunc="updateDevIdsFunc"
        @submitParamStandardClick="submitParamStandardClick"
      ></DevCard>
    </div>
    <a-card class="footer_card">
      <div class="footer_card_box">
        <a-popconfirm
          title="提示:请确保参数项除备注外不可为空,设备选择数量必须大于0,确定保存将会清除设备之前的配置,请谨慎操作!"
          ok-text="确定"
          cancel-text="取消"
          @confirm="submitConfirmClick"
          @cancel="submitCancelClick"
          :disabled="isDisabled"
        >
          <a-button type="primary" :disabled="isDisabled">保存</a-button>
        </a-popconfirm>
        <a-button style="margin-left: 20px" @click="goBack">返回</a-button>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted, watch, computed} from 'vue'

  export default defineComponent({
    name: 'Standard'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {
    standardSelectType,
    standardSelectTypeList,
    paramType,
    paramTypeList,
    devType,
    devTypeList,
    paramStandard,
    paramStandardList,
    devStandRageType,
    devStandRageTypeList
  } from './module/paramCard/type.ts'

  import {
    selectDevListApi,
    selectParamListApi,
    submitQuickStandRangeApi
  } from '@/api/quickConfiguration_standard.ts'
  import ParamCard from './module/paramCard/index.vue'
import DevCard from './module/devCard/index.vue'
    import {getUserId} from '@/libs/auth'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP} from '@/components/text'
  import {message} from 'ant-design-vue'
  import useGlobalAPI from '@/hooks/useGlobalAPI'
  const {router} = useGlobalAPI()

  // 保存按钮的确定事件回调函数
  const submitConfirmClick = () => {
    submitParamStandardClick()
  }

  // 保存按钮的取消事件回调函数
  const submitCancelClick = () => {}

  // 底部的返回点击事件
  const goBack = () => {
    router.back()
  }

  // 提交点击事件
  const submitParamStandardClick = async () => {
    let devStandRageList = disposeParamStandRageFunc()
    console.log(devStandRageList)
    await submitQuickStandRangeApi({devIds: devIds.value, devStandRangeList: devStandRageList})
      .then((res: any) => {
        console.log(res)
        message.success('保存成功!')
      })
      .catch((err: any) => {
        console.log(err)
        message.error('保存失败,请联系管理员!')
      })
    console.log(devIds.value)
  }

  // 处理提交的参数数据的函数
  const disposeParamStandRageFunc = () => {
    let devStandRageList: devStandRageTypeList = []
    paramStandardList.value.forEach((item: paramStandard) => {
      let paramCode = ''
      let devSRDesc = ''
      let standRange = ''

      // 取出参数Code
      paramDataList.value.forEach((item1: paramType) => {
        if (item1.dictName == item.paramName) {
          paramCode = item1.dictCode
        }
      })

      // 取出参数项备注
      devSRDesc = item.standRangeDesc

      // 取出参数的范围
      switch (item.paramTypeName) {
        case '两者之间':
          standRange = item.standRangeLeft + '-' + item.standRangeRight
          break
        case '大于等于':
          standRange = '>=' + item.standRangeSingle
          break
        case '小于等于':
          standRange = '<=' + item.standRangeSingle
          break
        default:
          break
      }
      devStandRageList.push({
        paramCode: paramCode,
        devSRDesc: devSRDesc,
        standRange: standRange
      })
    })
    return devStandRageList
  }

  // 更改devIds的事件
  const updateDevIdsFunc = (idsStr: string) => {
    devIds.value = idsStr
  }

  /* 数据--------------------------------------------- */

  // 保存是否是禁用状态的标识
  const isDisabled = computed(() => {
    let flag = false
    if (paramStandardList.value.length == 0 || devIds.value == '') {
      flag = true
    }
    if (paramStandardList.value[0].paramName == '') {
      flag = true
    }
    if (paramStandardList.value[0].paramTypeName == '两者之间') {
      if (
        paramStandardList.value[0].standRangeLeft == '' ||
        paramStandardList.value[0].standRangeLeft == null ||
        paramStandardList.value[0].standRangeLeft == undefined ||
        paramStandardList.value[0].standRangeRight == '' ||
        paramStandardList.value[0].standRangeRight == null ||
        paramStandardList.value[0].standRangeRight == undefined
      ) {
        flag = true
      }
    } else {
      if (
        paramStandardList.value[0].standRangeSingle == '' ||
        paramStandardList.value[0].standRangeSingle == null ||
        paramStandardList.value[0].standRangeSingle == undefined
      ) {
        flag = true
      }
    }
    return flag
  })

  // 选择的设备 ids 字符串  使用 , 隔开
  const devIds = ref('')

  // 设备列表数据
  const devDataList = ref<devTypeList>([])

  // 参数范围类型选择框数据
  const paramSelectTypeList = ref<standardSelectTypeList>([
    {
      id: 201,
      typeName: '两者之间'
    },
    {
      id: 202,
      typeName: '小于等于'
    },
    {
      id: 203,
      typeName: '大于等于'
    }
  ])
  // 当前的参数标准列表
  const paramStandardList = ref<paramStandardList>([
    {
      paramName: '',
      paramTypeName: '两者之间',
      standRangeLeft: '',
      standRangeRight: '',
      standRangeSingle: '',
      standRangeDesc: '',
      standRangeUnit: '',
      isDisabled: false
    }
  ])

  // 参数列表数据
  const paramDataList = ref<paramTypeList>([])

  // 查询参数列表的函数
  const selectParamListFunc = async () => {
    const userId = getUserId()
    const res = await selectParamListApi({platFormSubUserId: userId})
    // console.log(res.data, 'paramList')
    paramDataList.value = res.data
  }

  // 查询设备列表的函数
  const selectDevListFunc = async () => {
    const userId = getUserId()
    const res = await selectDevListApi({platFormSubUserId: userId})
    console.log(res.data, 'devList')
    res.data.forEach((item: devType) => {
      item.isChecked = false
    })
    devDataList.value = res.data
  }

  // 初始化
  onMounted(() => {
    selectParamListFunc()
    selectDevListFunc()
  })
</script>

<style lang="less" scoped>
  .card_wrap_box {
    display: flex;
    flex-direction: row;

    .param_card {
      margin-right: 20px;
    }
  }
  .footer_card {
    margin-top: 20px;
  }
</style>
